<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane v-for="item in tabsData" :label="item.label" :name="item.name"  :key="item.name">
      </el-tab-pane>
    </el-tabs>
    <div>
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="分类">
          <el-cascader 
          :options="options" 
          v-model="queryForm.category_id"
          placeholder="全部" 
          :props="props" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input
            placeholder="手机号/内容/@用户名"
            clearable
            prefix-icon="el-icon-search"
            v-model="queryForm.query_value">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="_getContentList">查询</el-button>
          <el-button type="danger" icon="el-icon-close"  @click="confirm('delmany')">删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="mainList"
        stripe
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="info_content"
          label="内容"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="category_name"
          label="分类"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="user_name"
          label="用户"
        >
        </el-table-column>
        <el-table-column
          prop="mobilenum"
          label="电话"
            width="150"
        >
        </el-table-column>
        <el-table-column
          prop="info_status"
          :formatter="statusFmt"
          label="状态"
        >
        </el-table-column>
        <el-table-column
          prop="init_time"
          :formatter="timeFmt"
          label="发布时间"
        >
        </el-table-column>
        <el-table-column
          prop="view_count"
          label="浏览量"
        >
        </el-table-column>
        <el-table-column
          prop="comment_count"
          label="评论数"
        >
        </el-table-column>
        <el-table-column
          prop="like_count"
          label="点赞数"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.info_status == 0" @click="confirm('audi', scope.row)"><i class="iconfont icon-shenpi"></i>审批</el-button>
            <el-button type="text" v-if="scope.row.info_status == 3" @click="confirm('status', scope.row)"><i class="iconfont icon-right-f"></i>开启</el-button>
            <el-button type="text" v-if="scope.row.info_status == 2" @click="confirm('status', scope.row)"><i class="iconfont icon-guanbi"></i>关闭</el-button>
            <el-button type="text" @click="getDetail(scope.row)"><i class="iconfont icon-1202youjiantou"></i>详情</el-button>
            <el-button type="text" @click="confirm('del', scope.row)"><i class="iconfont icon-del"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagecon"
        background
        layout="prev, pager, next"
        @current-change="_getContentList"
        :current-page.sync="page.curpage"
        :total="page.total">
      </el-pagination>
    </div>
    <DetailModal 
      @getMoreChild="getMoreChild" 
      @getMore="getMore"
      :full-show.sync="fullShow" 
      :detailObj="detailObj" 
      :commentData="commentData" 
      :hasMorePage="hasMorePage">
    </DetailModal>
  </div>
</template>

<script>
import {getCateGoryAllList} from 'api/categoryManagement'
import {getContentList, getContentDetail, auditContent, delContent, updateContentStatus} from 'api/contentManagementAPI'
import {getDetailCommentList, getDetailHFCommentList} from 'api/commentManagementAPI'
import formatDate from 'common/js/date'
import DetailModal from 'components/detailModal/detailModal'
export default {
  data() {
    return {
      tabsData: [
        {name: 'all', label: '全部'},
        {name: '0', label: '未审核'},
        {name: '2', label: '显示中'},
        {name: '3', label: '已关闭'}
      ],
      props: {
        value: 'category_id',
        label: 'category_name',
        children: 'child'
      },
      fullShow: false,
      activeName: 'all',
      options: [],
      queryForm: {},
      detailObj: {},
      mainList: [],
      page: {
          curpage: 1,
          total: 1
      },
      commentpage: {
        curpage: 1,
        total: 1
      },
      commentData: []
    }
  },
  computed: {
    hasMorePage() {
      return this.commentpage.total > this.commentpage.curpage
    }
  },
  components: {
    DetailModal
  },
  methods: {
    getMoreChild(index) {
      console.log('到了')
      let data = this.commentData[index]
      getDetailHFCommentList(++data.childpage, {info_id: data.info_id, parent_id: data.comment_id}).then(res => {
        data.childpage += 1
        data.hf_comments = [...data.hf_comments, ...res.rData]
      })
    },
    getMore() {
      this.commentpage.curpage += 1
      console.log(this.commentpage.curpage)
      getDetailCommentList(this.commentpage.curpage, {info_id: this.commentData[0].info_id}).then(res => {
        console.log(res)
        this.commentpage.total = res.pageInfo.Total
        // 加个当前也
        res.rData.forEach(item => {
          item.childpage = 1
        })
        this.commentData = this.commentData.push(res.rData)
      })
    },
    handleSelectionChange(rows){
      this.delArr = rows.map(row => {
        return {info_id: row.info_id, category_id: row.category_id}
      })
    },
    confirm(type, row) {
      this.$confirm('是否确认进行此操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if(type==='audi') {
          this._auditContent(row)
        }else if(type === 'status') {
          this._updateContentStatus(row)
        }else if(type === 'del') {
          this.oneDel(row)
        }else if(type === 'delmany'){
          this.manyDel()
        }
      })
    },
    _updateContentStatus(row) {
      let data = {
        info_id: row.info_id
      }
      if(row.info_status === 2){
        data.info_status = 3
      }else{
        data.info_status = 2
      }
      updateContentStatus(data).then(res => {
        if(res) {
          this._caozuoAfter(res)
        }
      })
    },
    _auditContent(row) {
      let data = {
        info_id: row.info_id,
        category_id: row.category_id,
        audit_status: 1
      }
      auditContent(data).then(res => {
        if(res) {
          this._caozuoAfter(res)
        }
      })
    },
    oneDel(row) {
      let data = {
        info_id: row.info_id,
        category_id: row.category_id
      }
      delContent(data).then( res => {
        if(res) {
          this._caozuoAfter(res)
        }
      })
    },
    manyDel() {
      if(!this.delArr.length){
        this.$message({
          message: '还未选择要删除的选项',
          type: 'error'
        })
        return 
      }
      let data = {
        info_ids: this.delArr
      }
      delContent(data).then( res => {
        if(res) {
          this._caozuoAfter(res)
        }
      })
    },
    _caozuoAfter(res){
      this.$message({
        message: res.rMsg,
        type: 'success'
      })
      this.page.curpage = 1
      this._getContentList()
    },
    getDetail(row){
      this.commentpage.curpage = 1
      let info_id = row.info_id
      this.fullShow = true
      getContentDetail({info_id}).then(res => {
        this.detailObj = res.rData[0]
      })
      getDetailCommentList(this.commentpage.curpage, {info_id}).then(res => {
        console.log(res)
        this.commentpage.total = res.pageInfo.Total
        // 加个当前也
        res.rData.forEach(item => {
          item.childpage = 1
        })
        this.commentData = res.rData
      })
    },
    statusFmt(row, column, cellValue){
      let obj = {
        '0': '待审核',
        '2': '显示中',
        '3': '关闭中'
      }
      return obj[cellValue]
    },
    timeFmt(row, column, cellValue){
      return formatDate(cellValue*1000, 'yyyy-MM-dd hh:mm:ss')
    },
    _getCateGoryAllList(){
      getCateGoryAllList().then(res => {
        this.options = res.rData
      })
    },
    // 获取
    _getContentList(){
      let data = JSON.parse(JSON.stringify(this.queryForm))
      if(data.category_id){
        data.category_id = data.category_id.pop()
      }
      data.info_status = this.activeName
      if(this.activeName==='all'){
        data.info_status = ''
      }
      getContentList(this.page.curpage, data).then(res => {
        this.page.total = res.pageInfo.Total
        this.mainList = res.rData
      })
    }
  },
  watch: {
    activeName: {
      handler(){
        this.page.curpage = 1
        if(this.delArr){
          this.delArr = []
          this.$refs.multipleTable.clearSelection()
        }
        this._getContentList()
      },
      immediate: true
    }
  },
  created(){
    if(this.$route.params.name){
      this.queryForm.query_value = '@'+this.$route.params.name
    }
    this._getCateGoryAllList()
  }
}
</script>